---
{
	"title": "Web Accessibility Assessment Methodology in JSON-LD (Level AA)",
	"language": "en",
	"description": "Instructions to complete the assessment of each success criterion according the proposed methodology.",
	"tag": "wamethod",
	"parentdir": "wamethod",
	"altLangPage": "wamethod-json+ld-AA-fr.html",
	"dateModified": "2023-03-16",
}
---


<section class="alert alert-info">
	<h2>Sample page - Baseline template</h2>
	<p>This page is the initial template with the fillable instructions to produce an ACR (Accessibility Conformance Report) showing the conformance state of the evaluated web page subject. This template report is pre-configured to aim an ACR towards a full conformance with every WCAG 2.1 Level AA Success Criterion.</p>
</section>

<p>Here are the instructions to complete the assessment of each success criterion according the <a href="../wamethod/wamethod-AA-en.html">Web Accessibility Assessment Methodology (Level AA)</a>:</p>
<ol>
	<li>Copy the baseline JSON-LD file. (<a href="demo-acr/acr-initial.json" type="application/ld+json" download>Download the baseline template</a>)</li>
	<li>
		<p>Name your file according to the rules below.</p>
		<p>The proposed naming convention starts with the type of report (like acr which means Accessibility Conformance Report), followed by a dash, followed by a unique identifier and then:</p>
		<dl>
			<dt>JSON-LD report</dt>
			<dd>Followed by a file extension suggesting the JSON file format. The pattern is : <code>acr-{identifier}.json</code>. Here are some examples: <code>acr-1.json</code>, <code>acr-2023-03-16.json</code></dd>

			<dt>WET-BOEW - Report publication page</dt>
			<dd>Followed by a dash, followed by the 2 letters language code and followed by the file extension <code>hbs</code>. The pattern is : <code>acr-{identifier}-{language}.hbs</code>. Here are some examples: <code>acr-1-en.hbs</code>, <code>acr-1-fr.hbs</code>, <code>acr-2023-03-16-en.hbs</code>, <code>acr-2023-03-16-fr.hbs</code></dd>

			<dt>GCWeb - Report publication page</dt>
			<dd>Followed by a dash, followed by the 2 letters language code and followed by the file extension <code>html</code>. The pattern is : <code>acr-{identifier}-{language}.html</code>. Here are some examples: <code>acr-1-en.html</code>, <code>acr-1-fr.html</code>, <code>acr-2023-03-16-en.html</code>, <code>acr-2023-03-16-fr.html</code></dd>
		</dl>
	</li>
	<li>
		<p>Configure the HTML report template page</p>
		<dl>
			<dt>WET-BOEW - Report publication page</dt>
			<dd>
				<p>Use the following front-matter and adapt the page metadata to match the ACR publication context.</p>
				<pre><code>---
{
	"title": "Accessibility assessment #{identifier} - Topic",
	"language": "{language}",
	"altLangPage": "acr-{identifier}-fr.html",
	"dateModified": "YYYY-MM-DD",
	"layout": "acr-{language}.hbs",
	"reportURL": "acr-{identifier}.json"
}
---</code></pre>
				<p>Update the following page properties:</p>
				<dl class="dl-horizontal">
					<dt><code>title</code></dt>
					<dd>Title of the Accessibility Conformance Report</dd>
					<dt><code>language</code></dt>
					<dd>2 letters language code of this published report</dd>
					<dt><code>altLangPage</code></dt>
					<dd>Filename of the language alternate page</dd>
					<dt><code>dateModified</code></dt>
					<dd>Date modified</dd>
					<dt><code>layout</code></dt>
					<dd>English report template: <code>acr-en.hbs</code></dd>
					<dd>French report template: <code>acr-fr.hbs</code></dd>
					<dt><code>reportURL</code></dt>
					<dd>JSON URL of the accessibility conformance report</dd>
				</dl>
			</dd>
			<dt>GCWeb - Report publication page</dt>
			<dd>Specific configurations are not published yet</dd>
		</dl>
	</li>
	<li>
		<p>Save and link the report, make it findable</p>
		<p>Add the new and contexualized files in the main plugin folder or component folder inside a sub-folder named <code>reports</code>.</p>
		<dl>
			<dt>WET-BOEW - Report publication page</dt>
			<dd>Add a link to the English and French report from the plugin documentation page or in the dedicated section in the plugin working example page</dd>
			<dt>GCWeb - Report publication page</dt>
			<dd>Add a link to the English and French report from the component json-ld index file and optionally direct link from the component documentation page.</dd>
		</dl>
	</li>

	<li>
		<p>Update the following meta information required for your ACR report by using the baseline JSON-LD ACR:</p>
		<dl>
			<dt class="brdr-tp">Report permanent URL (<code>@id</code>)</dt>
			<dd>Final URL of where this report is going to be published</dd>
			<dd>Pattern: <code>{url}</code></dd>
			<dd>Example: <code>https://wet-boew.github.io/wet-boew/demos/wamethod/demo-acr/acr-1.json</code></dd>

			<dt class="brdr-tp">Report identifier (<code>reportId</code>)</dt>
			<dd>Identifier for the report which makes it unique among the other ACR reports in the same location.</dd>
			<dd>Pattern: <code>{identifier}</code></dd>
			<dd>Example: <code>1</code></dd>

			<dt class="brdr-tp">Subject URL (<code>subjectUrl</code>)</dt>
			<dd>URL of the asserted subject.</dd>
			<dd>Pattern: <code>{URL}</code></dd>
			<dd>Example: <code>https://example.com/url/of/the/page/being/assessed</code></dd>

			<dt class="brdr-tp">Assessor name (<code>assertedBy/producedBy/name</code>)</dt>
			<dd>Full name of the assessor, optionally followed by their GitHub handle</dd>
			<dd>Pattern: <code>{Full Name} ({Social media name}: @{Social media handle})</code></dd>
			<dd>Example: <code>The Octocat  (GitHub: @octocat)</code></dd>

			<dt class="brdr-tp">Assessor identifier (<code>assertedBy/producedBy/@id</code>)</dt>
			<dd>Identifier URL to the assessor's social media profile page</dd>
			<dd>Pattern: <code>{URL}</code></dd>
			<dd>Example: <code>https://github.com/octocat</code></dd>

			<dt class="brdr-tp">Organization of the assessor (<code>assertedBy/name</code>)</dt>
			<dd>Name of the organization, optionally preceded by the department name</dd>
			<dd>Pattern: <code>{Department name} - {Organization name}</code></dd>
			<dd>Example: <code>Service Canada - Principal Publisher</code></dd>

			<dt class="brdr-tp">Organization identifier (<code>assertedBy/@id</code>)</dt>
			<dd>Identifier URL to the assessor's organization profile page</dd>
			<dd>Pattern: <code>{URL}</code></dd>
			<dd>Example: <code>https://github.com/ServiceCanada</code></dd>

			<dt class="brdr-tp">Assessment scope (<code>scope</code>)</dt>
			<dd>Scope of the assessment defining what is being assessed and what is out of scope. Also, a human readable note about what success criteria are going to be assessed against which standard which must match the property <code>earl:test</code> defined at the root of this report</dd>
			<dd>Pattern: <code>{Description of the scope}</code></dd>
			<dd>Example: Partial evaluation focused only on the component {name of the component} and not its container. Evaluated all Success Criteria at Level AA of WCAG 2.1</dd>
		</dl>
	</li>
	<li>
		<p>Record the assessment of each individual success criteria. For each success criteria in the <code>results</code> property:</p>

		<p>The property <code>label</code> contains a human readable version of the success criterion title and the property <code>earl:test</code> is a programmatically determined reference to the success criterion item in the WCAG (Web Content Accessibility Guidance) published standard.</p>

		<dl>
			<dt class="brdr-tp">Outcome in human readable format (<code>outcome</code>)</dt>
			<dd>Human readable text indicating the success criteria result state. The outcome and the result of the performed test.</dd>
			<dd>Pattern: <code>{Outcome value}</code></dd>
			<dd>Reference: <a href="https://www.w3.org/TR/EARL/#OutcomeValue">https://www.w3.org/TR/EARL/#OutcomeValue</a></dd>
			<dd>Example: Passed; Failed; Cannot tell; Inapplicable; Untested</dd>

			<dt class="brdr-tp">Outcome in machine readable format (<code>earl:outcome</code>)</dt>
			<dd>Machine readable data indicating the success criteria result state. The outcome and the result of the performed test which exactly match the property <code>outcome</code>.</dd>
			<dd>Pattern: <code>{Reference to the outcome}</code></dd>
			<dd>Reference: <a href="https://www.w3.org/TR/EARL/#OutcomeValue">https://www.w3.org/TR/EARL/#OutcomeValue</a></dd>
			<dd>Example: <code>earl:passed</code>; <code>earl:failed</code>; <code>earl:cantTell</code>; <code>earl:inapplicable</code>; <code>earl:untested</code></dd>

			<dt class="brdr-tp">SC assessment notes (<code>notes</code>)</dt>
			<dd>Any notes about the assessment of this success criterion. Complement by adding the discussed technique or the one that is clearly fully applied in the 'technique' property to set a reference to its matching 'earl:TestRequirement'</dd>
			<dd>Pattern: <code>{Human readable note}</code></dd>

			<dt class="brdr-tp">Referenced and applied techniques (<code>techniques</code>)</dt>
			<dd>List of machine readable reference to the referenced technique in the note and the technique that was clearly applied. The reference consist into a prefix followed by the technique identifier which we can easily deduct from the two (2) last sections of the technique URL.</dd>
			<dd>Pattern: <code>WCAG2xTech:{ Technique identifier }</code></dd>
			<dd>Example: <code>WCAG2xTech:failures/F100</code>; <code>WCAG2xTech:general/G94</code>; <code>WCAG2xTech:html/H42</code>; <code>WCAG2xTech:css/C6</code>; <code>WCAG2xTech:aria/ARIA13</code>; <code>WCAG2xTech:failures/client-side-script/SCR19</code>; <code>WCAG2xTech:server-side-script/SVR1</code>; <code>WCAG2xTech:pdf/PDF1</code>; <code>WCAG2xTech:smil/SM7</code>; <code>WCAG2xTech:text/T2</code></dd>

			<dt class="brdr-tp">Testing mode (<code>earl:mode</code>)</dt>
			<dd>
				<p>Machine readable data indicating how the success criteria assessment has been performed.</p>
				<ul>
					<li><strong>Automated</strong> means the assessment was completed by an automated tool (like <a href="https://wave.webaim.org/">WAVE</a>, <a href="https://www.deque.com/axe/">axe</a>, <a href="https://accessibilityinsights.io/">Accessibility Insights</a>...) which has analysed the subject page. The assessor is only logging the result <em>without validating</em> from the page source code or the page rendered view if that information is fully accurate.</li>
					<li><strong>Semi-automated</strong> means the assessment was completed with the assistance of some automated tool which has analysed the subject page to help the assessor quickly identify some common issues and <em>the assessor did validate</em> from the source code and the rendered view the issues or comments valuable and applicable.</li>
					<li><strong>Manual</strong> means the assessment was completed <em>by manually validating</em> from the source code and the rendered view which didn't require a tool that has read from the source page but might have involved the use of a helper tool such as a color contrast online checker.</li>
				</ul>
			</dd>
			<dd>Pattern: <code>earl:{ Mode of the testing }</code></dd>
			<dd>Reference: <a href="https://www.w3.org/TR/EARL/#TestMode">https://www.w3.org/TR/EARL/#TestMode</a></dd>
			<dd class="brdr-bttm">Example: <code>earl:automatic</code>; <code>earl:manual</code>; <code>earl:semiAuto</code>; <code>earl:undisclosed</code>; <code>earl:unknownMode</code></dd>
		</dl>

		<p>Notes:</p>
		<ul class="mrgn-bttm-md">
			<li>Sample and specific instructions based on the type of assessment result are going to be published later.</li>
			<li>More information about the use and the definition of some properties can be found in the <a href="https://wet-boew.github.io/vocab/acr/">WET-BOEW accessibility conformation report vocabulary extension</a>.</li>
		</ul>
	</li>
	<li>
		<p>Closing the initial assessment conformance report by adding the following meta information.</p>
		<dl>
			<dt class="brdr-tp">Summary or/and general notes about the assessment (<code>summary</code>)</dt>
			<dd>A summary or/and a general notes made by the assertor regarding this assessment, observation or/and comments which will help to provide more context and improve the understanding of the assessment result itself. Also, it may contain any note that impact the conformance beyond the tested success criteria, like assessment comment related to section '5. Conformance' in WCAG 2.x.</dd>
			<dd>Pattern: <code>{General note}</code></dd>

			<dt class="brdr-tp">Assessment conformance score (<code>aggregatedScore</code>)</dt>
			<dd>Percentage (%) manually calculated representing all the success criteria that have passed compared to the total of tested success criteria</dd>
			<dd>Pattern: <code>{Success rate} %</code></dd>
			<dd>Example: <code>74%</code></dd>
		</dl>
	</li>
	<li>Publish the ACR by opening a <a href="https://github.com/wet-boew/wet-boew/pulls">GitHub Pull Request</a> according to our <a href="https://github.com/wet-boew/wet-boew/blob/master/CONTRIBUTING.md#how-to-contribute">contribution guideline</a>.</li>
</ol>
